<template>
	<view style="background-color: #f6efe9;[position: relative;]">

		<view style="display: flex;justify-content: center;flex-direction: column;align-items: center;">
			<view class="edgeInsetTop"></view>
			<view class="wanl-order" style="width: 100%;box-shadow: 0 0  1vw 0 rgba(0, 0, 0, 0.05);">
				<!-- 头部 -->
				<view class="details-header">
					<!-- <image :src="$wanlshop.appstc('/order/img_detail_bg.png')" class="img-bg"></image> -->
					<view class="content-wrap">
						<uni-steps class="my-steps" :options="tepOptions" :active="orderData.state-1"
							active-icon="checkbox" active-color="#fff"
							v-if="orderData.state== 2 || orderData.state== 3 || orderData.state== 4 || orderData.state== 8 || orderData.state== 9">
						</uni-steps>

						<view style="font-size: 30rpx;display: flex;align-items: center;justify-content: center;">
							<view v-if="orderData.state == 1" class="status-text" style="color: #fff">
								{{ztaiData}}
							</view>

							<view class="status-text" style="color: #fff;" v-if="orderData.state== 7">
								订单已取消
							</view>

							<!-- <view class="reason"><text class="reason-text">{{orderData.statetime}}</text></view> -->
						</view>
						<view class="countdown" v-if="orderData.state==1"
							style="display: flex;align-items: center;color:#fff;padding: 10rpx 0; position: relative;left: 2.4vw; font-size: 24rpx;">
							<text>请在</text>
							<uni-countdown :show-day="false" :show-hour="false" color="#fff"
								:minute="Math.floor((orderData.createtime*1000 + 15 * 60 * 1000 - new Date().getTime()) / 1000 / 60)"
								:second="Math.floor(((orderData.createtime*1000 + 15 * 60 * 1000 - new Date().getTime()) / 1000) % 60)" />
							<text>内完成支付</text>
						</view>
						<!-- 		
						 <image :src="$wanlshop.appstc('/order/'+getImg(orderData.state))" class="status-img" mode="widthFix"></image> -->
					</view>
				</view>

				<!-- 详情 -->
				<view class="main">
					<!-- 物流信息 -->
					<view class="section section-3 flex" v-if="orderData.state >= 3">
						<view>
							<image mode="widthFix" src="../../../static/images/default/huoche.png" class="cu-avatar">
							</image>
						</view>
						<view class="flex-1">
							<view class="font-bold">查看物流信息</view>
							<view class="mt5 flex flex-middle" @tap="onLogistics(orderData.id)">
								<view class="flex-1">{{ orderData.logistics.context }}</view>
								<view><uni-icons type="right" size="16" color="#999"></uni-icons></view>
							</view>
							<view class="mt5">{{ orderData.logistics.time }}</view>
						</view>
					</view>


					<!-- 地址信息 -->
					<view class="section section-1">
						<image src="../../../static/images/default/location.png" mode="widthFix" class="cu-avatar">
						</image>
						<view class="row">
							<text>{{orderData.address.name}} {{orderData.address.mobile}} </text>
						</view>
						<view class="row">{{orderData.address.address.replace(/\//g,'')}}</view>
					</view>

					<!-- 商品信息 -->
					<view class="section section-2">
						<view class="cu-list menu-avatar">
							<block v-for="(item, index) in orderData.goods" :key="item.id">
								<view class="item">
									<view class="cu-avatar radius"
										:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.image) + ')' }"
										@tap="onGoods(item.goods_id)"></view>
									<view class="content" @tap="onGoods(item.goods_id)">
										<view class="text-cut-2 title">{{item.title}}</view>
										<view class="wanl_sku text-sm"
											style="display: flex;font-size: 3.2vw;color: #6A6A6A;gap: 8rpx; background-color: white;">
											<text class="wanl-gray"
												style="font-size: 22rpx;margin-bottom: 8rpx;">{{item.difference}}</text>
										</view>
										<view class="price">
											<text class="text-price">{{item.actual_payment}}</text>
											<text class="wanl-gray num">x {{item.number}}</text>
										</view>
									</view>
								</view>
								<view class="flex justify-end padding-lr-bj padding-bottom-sm" v-if="orderData.state != 1">
									<button v-if="item.service_status == 1" @tap.stop="use(orderData)"
										class="use margin-bgg">立即使用</button>
									<button v-if="item.service_status == 2" @tap.stop="orderQrCode(orderData.id)"
										class="margin-bgg">已预约</button>
									<button v-if="item.service_status == 3"
										@tap.stop="toEvaluate(orderData.id,'service',item.id)" class="margin-bgg">评价服务</button>
									<button v-if="item.service_status == 4" @tap.stop class="margin-bgg">已取消</button>
									<button class="margin-bgg"
										@tap="onRefund(orderData.id, item.refund_status, item.refund_id, index)"
										v-if="orderData.state == 2 || orderData.state == 3 || orderData.state == 4 || orderData.state == 6 ">
										{{getRefund(item.refund_status)}}</button>
								</view>
							</block>

							<!-- 客服 -->
							<view class="kefu" style="border-top: 2rpx solid #e7e7e7;">
								<view class="btn-grow">
									<view class="btn-contaniner" @click="callKefu">
										<!-- <view class="btn-icons" :style="{ backgroundImage: 'url(../../../static/images/default/location.png)'}"></view> -->

										<image src="../../../static/images/service/phone.png" class="btn-icons"></image>
										<text>电话客服</text>
									</view>
									<view class="btn-contaniner" @tap="onUser()">
										<!-- <view class="btn-icons" :style="{ backgroundImage: 'url(../../../static/images/default/location.png)'}"></view> -->

										<image src="../../../static/images/service/kefu.png" class="btn-icons"></image>
										<text>在线客服</text>
									</view>
								</view>

								<view class="tip">服务时间：{{kefu.time}}</view>
							</view>
						</view>
					</view>


					<!-- ****** 以下是未修改的 ***** -->

					<view class="lists" v-if="orderData.order_no">
						<!-- <view class="cu-list menu-avatar">
						<block v-for="(item, index) in orderData.goods" :key="item.id">
							<view class="cu-item">
								<view class="cu-avatar radius"
									:style="{ backgroundImage: 'url(' + $wanlshop.oss(item.image, 77, 77) + ')' }"
									@tap="onGoods(item.goods_id)"></view>
								<view class="content" @tap="onGoods(item.goods_id)">
									<view class="text-cut-2" style="color: black;">{{item.title}}</view>
									<view class="wanl_sku text-sm"
										style="display: flex;flex-direction: column;font-size: 3.2vw;color: #6A6A6A; background-color: white;">
										<text class="wanl-gray-dark">{{item.difference}}</text>
										<view class="wanl-gray">x {{item.number}}</view>
									</view>
									<view style="font-weight: bold;"><text
											class="text-price">{{item.actual_payment}}</text>
									</view>
								</view>
								<view class="action text-sm">
								</view>
							</view>
							<view class="flex justify-end padding-lr-bj padding-bottom">
								<button class="margin-bj" @tap="onUser()">在线客服</button>
								<button class="margin-bgg"
									@tap="onRefund(orderData.id, item.refund_status, item.refund_id, index)"
									v-if="orderData.state == 2 || orderData.state == 3 || orderData.state == 4 || orderData.state == 6 ">
									{{getRefund(item.refund_status)}}</button>
							</view>
						</block>
					</view> -->

						<view class="price text-sm bg-white"
							style="border-bottom: 0.2vw solid #D8D8D8;width: 100%;padding: 18rpx 24rpx;margin-bottom: 20rpx;border-radius: 20rpx;">
							<view style="font-weight: bold;">费用明细</view>
							<view class="margin-tb"> <text> 商品金额 </text> <text class="wanl-gray">
									¥{{orderData.pay.order_price}}
								</text>
							</view>
							<view class="text-sm  margin-tb"> <text> 运费 </text> <text
									class="wanl-gray">{{orderData.pay.freight_price }} </text> </view>
							<view class="margin-tb"> <text> 优惠券</text> <text class="wanl-gray">
									{{orderData.pay.discount_price}}
								</text> </view>
						</view>

						<!-- 订单信息 -->
						<view class="price text-sm bg-white"
							style="border-bottom: 0.2vw solid #D8D8D8;width: 100%;padding: 18rpx 24rpx;border-radius: 20rpx;">
							<view style="font-weight: bold;">订单信息</view>
							<view class="margin-tb"> <text> 订单编号 </text> <text class="wanl-gray"> {{orderData.order_no}}
									<text @tap="copyOrder(orderData.order_no)"
										style=" text-align:right;color: #fd8c00;border:2rpx solid #fd8c00;border-radius: 10rpx;padding: 4rpx 6rpx;margin-left: 10rpx;;">复制</text>
								</text>
							</view>
							<view class="text-sm  margin-tb"> <text> 下单时间 </text> <text
									class="wanl-gray">{{orderData.createtime_text}} </text> </view>
							<view class="margin-tb">
								<text> 订单状态 </text>
								<text style="color: #fd8c00;">
									{{orderData.state_text}}
								</text>
							</view>

							<!-- 	<view class="margin-tb"> <text> 支付方式</text> <text class="wanl-gray">
								{{orderData.logistics.status}}
							</text> </view> -->
							<view class="margin-tb"> <text> 支付时间 </text> <text class="wanl-gray">
									{{orderData.paymenttime_text}}
								</text> </view>

						</view>
					</view>

					<!-- 配送详情 -->
					<view style="position: relative;display: none;" class="order bg-white margin-top-bj padding-bj">

						<view class="text-sm">
							<!-- <view class="item" style="display: flex;justify-content: space-between;">
							<text style="width: 160rpx">订单状态</text>
							<text class="wanl-gray"> {{orderData.logistics.context}} </text>
						</view> -->
							<!-- <view class="item" style="display: flex;justify-content: space-between;">
							<text style="width: 160rpx">收货信息</text>
							<text class="wanl-gray"> {{orderData.address.name}} {{orderData.address.mobile}} </text>
						</view>
						 -->
							<!-- 	<view class="item" v-if="infoMore" style="display: flex;justify-content: space-between;">
							<text style="width: 160rpx">收货地址</text>
							<text class="wanl-gray"> {{orderData.address.address.replace(/\//g,'')}} </text>
						</view> -->

							<!-- <view
							style="width: 100rpx;height: 100rpx; display: flex;justify-content: center;position: absolute; bottom: -7vw; left: 40.13vw;">
							<view class="title  margin-tb " @tap="toMore" style="">
								<view class="wanl-gray" v-if="infoMore">
									<uni-icons type="up" color="#828282" size="20"></uni-icons>
								</view>
								<view v-else>
									<uni-icons type="down" color="#828282" size="20"></uni-icons>
								</view>

				
							</view>
						</view> -->


							<!-- <block 
							<view class="item" v-if="orderData.paymenttime">
								<text class="wanl-gray-dark" style="width: 160rpx">付款时间：</text>
								<text> {{orderData.paymenttime_text}} </text>
							</view>
							<view class="item" v-if="orderData.delivertime">
								<text class="wanl-gray-dark" style="width: 160rpx">发货时间：</text>
								<text> {{orderData.delivertime_text}} </text>
							</view>
							<view class="item" v-if="orderData.taketime">
								<text class="wanl-gray-dark" style="width: 160rpx">收货时间：</text>
								<text> {{orderData.taketime_text}} </text>
							</view>
						</block> -->
						</view>
						<!-- 	<view class="foot solid-top">
						<view @tap="toChat(orderData.shop_id)">
							<text class="wlIcon-xiaoxizhongxin text-sm"></text>联系卖家
						</view>
					</view> -->
					</view>

				</view>

			</view>

		</view>

		<!-- 		<wanl-product :dataList="likeData" />
		<uni-load-more :status="status" :content-text="contentText" />
		<view class="edgeInsetBottom"></view> -->

		<template style="background-color: #fff;">
			<view class="btn-container" v-if="orderData.state== 1">
				<view style="display: inline-block;" class="btns-details">应付款：<view
						style="color: red;margin-left: 12rpx;">¥ {{ orderData.pay.price }}</view>
				</view>
				<button class="margin-bj" @tap="editAddress(orderData.id, orderData)" :style="{
		        border: '2rpx solid #e5e5e5',
		        color: '#3d3d3d',
		        background: '#fff'
		    }">
					修改地址
				</button>
				<button class="margin-bj" @tap.stop="cancelOrdera(orderData)" :style="{
		        border: '2rpx solid #e5e5e5',
		        color: '#3d3d3d',
		        background: '#fff'
		    }">
					取消订单
				</button>

				<button class="margin-bj" @tap="paymentOrder(orderData.id)" :style="{
												background: '#fd8c00',
												color: '#fff',
												border: 'none'
											}">
					立即支付
				</button>
				<button class="margin-bg" @tap="payMentPost(orderData)" v-if="orderData.invoicable">
					申请开票
				</button>
			</view>
			<view v-else-if="orderData.state==2" class="btn-container">
				<view style="display: inline-block;" class="btns-details">应付款：<text
						style="color: red;margin-left: 12rpx;">¥ {{ orderData.pay.price }}</text></view>
				<button class="margin-bj" @tap="toChat(orderData.shop_id)" :style="{
		        border: '2rpx solid #e5e5e5',
		        color: '#3d3d3d',
		        background: '#fff'
		    }">
					催发货
				</button>
				<button class="margin-bg" @tap="payMentPost(orderData)" v-if="orderData.invoicable">
					申请开票
				</button>
				<button class="margin-bgg" @tap="editAddress(orderData.id, orderData)" :style="{
		        border: '2rpx solid #fd8c00',
		        color:'#fd8c00',
		        background: '#fff6ed'
		    }">
					修改地址
				</button>
			</view>
			<view class="action-box padding-bottom-bj btn-container" v-else-if="orderData.state == 3">
				<view style="display: inline-block;" class="btns-details">应付款：<view
						style="color: red;margin-left: 12rpx;">¥ {{ orderData.pay.price }}</view>
				</view>
				<button class="margin-bj" @tap="onLogistics(orderData.id)" :style="{
		        border: '2rpx solid #e5e5e5',
		        color: '#3d3d3d',
		        background: '#fff'
		    }">
					查看物流
				</button>
				<button class="margin-bgg" style="background: #fd8c00; color: #fff" @tap="ConfirmReceipt(orderData)">
					确认收货
				</button>
			</view>
			<view class="action-box padding-bottom-bj btn-container" v-else-if="orderData.state == 4">
				<view style="display: inline-block;" class="btns-details">应付款：<view
						style="color: red;margin-left: 12rpx;">¥ {{ orderData.pay.price }}</view>
				</view>
				<button class="margin-bj" @tap="onLogistics(orderData.id)">
					查看物流
				</button>
				<button class="margin-bj" style="padding: 0vw 6.5vw; background: #fd8c00; color: #fff"
					@tap="commentOrder(orderData)">
					评价
				</button>
			</view>
			<view class="action-box padding-bottom-bj btn-container" v-else-if="orderData.state == 8">
				<view style="display: inline-block;" class="btns-details">应付款：
					<view style="color: red;margin-left: 12rpx;">¥ {{ orderData.pay.price }}</view>
				</view>
				<!-- <button v-if="getGoodStatus(order).indexOf(1) > -1" class="margin-bj" style="background: #fd7601; color: #fff"
		      @tap="orderQrCode(orderData.id)">
		      立即预约
		    </button>
		    <button v-if="getGoodStatus(order).indexOf(2) > -1" class="margin-bj" style="background: #fd7601; color: #fff"
		      @tap="orderQrCode(orderData.id)">
		      查看预约
		    </button> -->
			</view>

		</template>
		<!-- 确认收货 -->
		<view class="cu-modal couponModal" :class="modalName == '确认收货' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog bg-bgcolor" @tap.stop="">
				<view class="wanl-modal">
					<view class="head padding-bj" style="background: #fc8b00;">
						<view class="content">
							<view class="text-white">提示</view>
						</view>
						<view class="close wlIcon-31guanbi text-white" @tap="hideModal"></view>
					</view>
					<scroll-view class="model-box text-left" scroll-y="true">
						<view class="mb10">1.如果产品严重破损，请据签收；</view>
						<view class="mb10">2.一旦确认收货，表示对产品无任何异议；</view>
						<view>3.确认收货之后，不再接受退货。</view>
					</scroll-view>
					<view class="foot padding-lr-bj">
						<view class="flex w100P">
							<view class="flex-1 ml10 mr10">
								<button class="cu-btn w100P round text-bold complete" @tap="hideModal">取消</button>
							</view>
							<view class="flex-1 ml10 mr10">
								<button class="cu-btn w100P round text-bold complete text-white"
									style="background-color:#fd8c00;" @tap="confirmOrder">确认收货</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 取消订单 -->
		<view class="cu-modal couponModal" :class="modalName == '取消订单' ? 'show' : ''" @tap="hideModal">
			<view class="cu-dialog bg-bgcolor" @tap.stop="">
				<view class="wanl-modal">
					<view class="head padding-bj" style="background: #fc8b00;">
						<view class="content">
							<view class="text-white">提示</view>
						</view>
						<view class="close wlIcon-31guanbi text-white" @tap="hideModal"></view>
					</view>
					<scroll-view class="model-box text-left" scroll-y="true">
						<view class="mb10">订单取消后无法恢复，确认取消？</view>
					</scroll-view>
					<view class="foot padding-lr-bj">
						<view class="flex w100P">
							<view class="flex-1 ml10 mr10">
								<button class="cu-btn w100P round text-bold complete" @tap="hideModal">取消</button>
							</view>
							<view class="flex-1 ml10 mr10">
								<button class="cu-btn w100P round text-bold complete text-white"
									style="background-color:#fd8c00;" @tap="cancelOrder">确认</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

	</view>

</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				currentRow: {},
				modalName: null,
				ztaiData: '',
				likeData: [],
				contentText: {
					contentdown: ' ',
					contentrefresh: '正在加载...',
					contentnomore: '没有更多数据了'
				},
				status: 'loading',
				orderData: {
					order_no: '',
					address: {
						name: '加载中...',
						mobile: '',
						address: '',
						address_name: ''
					},
					logistics: {
						context: '',
						status: '',
						time: ''
					},
					statetime: ''
				},
				logisticsType: false,
				infoMore: false,
				isId: '',
				tepOptions: [{
					title: '已下单'
				}, {
					title: '仓库处理'
				}, {
					title: '已发货'
				}, {
					title: '已签收'
				}],
				// 电话客服
				kefu: {
					phone: '',
					time: ''
				}
			};
		},
		onShow() {
			console.log('show')
			const update = uni.getStorageSync('updateDetail_id');
			if (update) {
				console.log(update, '输出获取到的数据'); // 输出获取到的数据
				this.loadData({
					id: update
				});
				this.isId = update
			}
		},
		onLoad(option) {
			console.log('load')
			if (option.id) {
				this.loadData({
					id: option.id
				});
				this.isId = option.id;
				uni.setStorageSync('updateDetail_id', option.id)
				this.loadlikeData()
				this.loadKefu();
			} else {
				this.$wanlshop.msg('非法进入');
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/index'
					})
				}, 1000)
			}
		},
		onUnload() {
			uni.setStorageSync('updateDetail_id', '')
		},
		computed: {
			...mapState(['user', 'statistics', 'common'])
		},
		methods: {
			// onApply(id){
			// 	console.log(id,'onApply---onApply')
			// 	return
			// 	this.$wanlshop.to(`/pages/user/coupon/apply?id=${id}&state=true`);
			// },
			// 加载电话客服信息
			async loadKefu() {
				await this.$api.get({
					url: '/wanlshop/config/list',
					success: (res) => {
						console.log('res', res)
						this.kefu = {
							phone: res.tel_phone || '',
							time: res.working_hours || ''
						}
					}
				})
			},
			// 拨打客服电话
			callKefu() {
				if (this.kefu.phone) {
					uni.makePhoneCall({
						phoneNumber: this.kefu.phone
					})
				} else {
					this.$wanlshop.msg('暂无客服电话')
				}
			},
			// 立即使用
			use(order) {
				uni.navigateTo({
					url: `/pages/user/order/orderCode?id=${order.id}`
				})
			},
			getOrderState() {
				let states
				if (this.orderData.state == 2) {
					console.log(this.orderData.state, 'this.orderData.state')
					states = '0'
				}

				if (this.orderData.state == 8 || this.orderData.state == 3) {
					console.log(this.orderData.state, 'this.orderData.state')
					states = '2'
				}

				return states
			},
			// 预约状态
			goodStatus(order) {
				return order.goods.find(item => item.service_status)?.service_status
			},
			getGoodStatus(order) {
				let service_status_list = order.goods.map(item => +item.service_status)
				return service_status_list
			},
			cancelOrdera(item) {
				this.showModal('取消订单', item)
			},
			//取消订单- 设置为7 -全局
			cancelOrder() {
				let isId = this.isId
				let item = this.currentRow;
				uni.showLoading({
					title: "请稍后",
				});
				// 获取列表
				this.$api.post({
					url: "/wanlshop/order/cancelOrder",
					data: {
						id: item.id,
					},
					success: (res) => {
						this.loadData({
							id: isId
						});
						uni.hideLoading();
						this.hideModal()
					},
				});
			},
			commentOrder(order) {
				let orderGoodsId = order.goods.map(item => item.goods_id).join()
				this.$wanlshop.to(`/pages/user/order/evaluate?orderId=${order.id}&type=order`);
			},
			//支付订单
			paymentOrder(id) {
				this.$wanlshop.to(
					`/pages/user/money/pay?order_id=${id}&order_type=goods`
				);
			},
			/** 确认收货弹窗 */
			ConfirmReceipt(order) {
				this.showModal('确认收货', order)
			},
			// 弹出层
			showModal(name, row) {
				this.currentRow = row
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name, this.currentRow);
				} else {
					this.modalName = null;
				}
			},
			//确认收货- 全局
			confirmOrder() {
				let item = this.currentRow
				uni.showLoading({
					title: "请稍后",
				});

				// 获取列表
				this.$api.post({
					url: "/wanlshop/order/confirmOrder",
					data: {
						id: item.id,
					},
					success: (res) => {
						let {
							stateTip,
							stateTipColor
						} = this.orderStateExp(4);
						let state = 4
						// 存在到店服务
						if (item.state && item.goods.find(item => item.store_id)) {
							state = 8
						}
						item = Object.assign(item, {
							state: state,
							stateTip,
							stateTipColor,
						});
						this.$store.commit("statistics/order", {
							receiving: this.$store.state.statistics.order.receiving - 1,
							evaluate: this.$store.state.statistics.order.evaluate + 1,
						});
						uni.hideLoading();
						this.hideModal()
						/* this.$wanlshop.msg("收货成功");
						this.$wanlshop.back(1); */
						// TODO： 跳转收货成功界面
						uni.navigateTo({
							url: 'received?orderId=' + this.isId
						})
					},
				});
			},
			//订单状态文字和颜色
			orderStateExp(state) {
				let stateTip = "",
					stateTipColor = "#333";
				switch (+state) {
					case 1:
						stateTip = "待付款";
						stateTipColor = "red";
						break;
					case 2:
						stateTip = "待发货";
						stateTipColor = "red";
						break;
					case 3:
						stateTip = "待收货";
						stateTipColor = "red";
						break;
					case 4:
						stateTip = "已完成";
						break;
					case 5:
						stateTip = "交易成功";
						break;
					case 6:
						stateTip = "已完成";
						break;
					case 7:
						stateTip = "订单已关闭";
						stateTipColor = "red";
						break;
						//更多自定义
				}
				return {
					stateTip,
					stateTipColor,
				};
			},
			getRefund(status) {
				return ["退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][
					status
				];
			},
			// 修改地址
			editAddress(id, order) {
				this.$wanlshop.to('/pages/user/address/address?source=3&order_id=' + id);

				// let info = {
				//   order_no: order.order_no,
				//   order_id: order.id,
				//   shop_id: order.shop_id,
				//   price: order.pay.price,
				// };
				// uni.setStorage({
				//   key: "order_info",
				//   data: JSON.stringify(info),
				//   success: function () {
				//     console.log("存储成功");
				//   },
				// });
				// this.$wanlshop.to(`/pages/invoice/list`);
			},
			// 联系客服
			onUser() {
				this.$wanlshop.to(`/pages/user/service`);
			},
			// 复制
			copyOrder(data) {
				uni.setClipboardData({
					data: data,
					showToast: false,
					success: function() {
						uni.showToast({
							title: '复制成功',
							duration: 2000
						})
					}
				})
			},


			// 获取订单
			// 滚动底部加载猜你喜欢
			async loadlikeData() {
				this.$api.get({
					url: '/wanlshop/product/likes?pages=user',
					data: {
						page: this.current_page
					},
					success: res => {
						this.likeData = this.reload ? res.data : this.likeData.concat(res.data); //评论数据 追加
						this.current_page = res.current_page; //当前页码
						this.last_page = res.last_page; //总页码
						this.status = res.total == 0 ? 'noMore' : 'more';
					}
				});
			},
			async loadData(data, address = undefined) {
				this.$api.get({
					url: '/wanlshop/order/getOrderInfo',
					data: data,
					success: res => {
						this.orderData = res;
						this.ztaiData = this.getStatusText(this.orderData.state)
						console.log(res)
						this.logisticsType = true;
						if (res.state == 0) {
							this.orderData.statetime = '剩余时间0';
						} else if (res.state == 1) {
							var diff = (res.createtime + res.config.cancel * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.orderData.statetime = '还剩' + minutes + '分自动关闭订单';
							}
							if (hours > 0) {
								this.orderData.statetime = '还剩' + hours + '天' + minutes + '分自动关闭订单';
							}
							if (days > 0) {
								this.orderData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分自动关闭订单';
							}
						} else if (res.state == 2) {
							this.orderData.statetime = '等待卖家发货';
						} else if (res.state == 3) {
							var diff = (res.delivertime + res.config.receiving * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.orderData.statetime = '还剩' + minutes + '分自动确认收货';
							}
							if (hours > 0) {
								this.orderData.statetime = '还剩' + hours + '天' + minutes + '分自动确认收货';
							}
							if (days > 0) {
								this.orderData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分自动确认收货';
							}
						} else if (res.state == 4) {
							var diff = (res.taketime + res.config.comment * 86400) - Date.parse(
								new Date()) / 1000;
							var days = Math.floor(diff / 86400);
							var hours = Math.floor(diff % 86400 / 3600);
							var minutes = Math.floor(diff % 86400 % 3600 / 60);
							if (minutes > 0) {
								this.orderData.statetime = '还剩' + minutes + '分自动评论';
							}
							if (hours > 0) {
								this.orderData.statetime = '还剩' + hours + '天' + minutes + '分自动评论';
							}
							if (days > 0) {
								this.orderData.statetime = '还剩' + days + '天' + hours + '小时' + minutes +
									'分自动评论';
							}
						} else if (res.state == 6) {
							this.orderData.statetime = res.dealtime_text;
						} else if (res.state == 7) {
							this.orderData.statetime = '订单已取消';
						}
						let formatState = {
							1: '待付款',
							2: '待发货',
							3: '待收货',
							4: '待评价',
							5: '退款/售后',
							6: '已完成',
							7: '已取消',
							8: '待使用',
							9: '已评价',
						}
						this.$set(this.orderData, 'state_text', formatState[this.orderData.state] || '/')
					},
					fail: (res) => {
						console.log('fail', res)
						if (res.data.msg == '网络异常') {
							this.$wanlshop.msg('网络异常，请重试');
							setTimeout(() => {
								this.$wanlshop.back(1);
							}, 1000)
						}
					}
				});
			},
			getImg(status) {
				return ["img_order_payment3x.png", "img_order_send3x.png", "img_order_received3x.png",
					"img_order_signed3x.png", "img_order_closed3x.png", "img_order_signed3x.png",
					"img_order_closed3x.png"
				][status - 1];
			},
			getStatusText(status) {
				return ["待支付", "待发货", "待收货", "待评论", "退款订单", "订单已完成", "交易关闭"][status - 1];
			},
			getRefund(status) {
				return ["申请退款", "退款中", "待退货", "退款完成", "退款关闭", "退款被拒"][status];
			},
			/**
			 * 进入退款
			 * @param {Object} order_id 订单ID 
			 * @param {Object} status 售后状态:0=未退款,1=退款中,2=待退货,3=退款完成
			 */
			onRefund(order_id, refund_status, refund_id, index) {
				if (refund_status == 0) { //申请退款
					this.$wanlshop.to(`/pages/user/refund/apply?data=${JSON.stringify({
						order_id: this.orderData.id,
						order_type: 'goods',
						goods: this.orderData.goods[index],
						freight_type: this.orderData.freight_type,
						discount_price: this.orderData.pay.discount_price,
						goods_number: this.orderData.goods.length
					})}`);


				} else { // 查看详情
					this.$wanlshop.to(`/pages/user/refund/details?id=${refund_id}`);
				}
			},
			// 折叠项
			toMore() {
				this.infoMore = !this.infoMore;
			}
		}
	};
</script>

<style scoped lang="scss">
	page {
		height: 100%;
		background: #f6efe9 !important;
	}

	::v-deep .uni-countdown__splitor {
		color: #fff !important;
	}

	::v-deep .uv-steps {
		position: absolute;
		width: 100%;
		top: 20rpx;
		width: 100% !important;
	}

	::v-deep .uv-steps-item__wrapper {
		background-color: #fd8c00;
	}

	.my-steps {
		width: 100% !important;
	}

	::v-deep .uni-steps__row-title {
		color: #fff !important;
	}

	page {
		height: 100%;
		background: #f6efe9 !important;
	}

	.btn-container {
		display: flex;
		background-color: #fff;
		padding: 24rpx 30rpx;
		justify-content: flex-end;
		position: relative;
		align-items: center;

		button {
			border-radius: 50px;
		}

		button::after {
			border: none !important;
		}

		.btns-details {
			flex: 3;
		}
	}

	.margin-tb {
		margin: 1.6vw 0;
	}

	.margin-bj {
		border: 1rpx solid #fe8d03;
		box-sizing: border-box;
		color: #fe8d03;
		font-size: 2.8vw;
		font-weight: normal;
		margin: 0 1vw;
		background-color: #fff;
		border-radius: 52.53vw;
		width: 19.73vw;
		height: 7.2vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.margin-bgg {
		border: 1rpx solid #e5e5e5;
		background-color: #fff;
		color: #3d3d3d;
		font-size: 2.8vw;
		font-weight: normal;
		margin: 0 1vw;
		border-radius: 52.53vw;
		width: 19.73vw;
		height: 7.6vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.margin-bgg::after {
		border: none !important;
	}

	.wanl-order .header {
		width: 100%;
		height: 180rpx;
		position: relative;
		background-color: #f72b36;
	}

	.wanl-order .header .img-bg {
		width: 100%;
		height: 180rpx;
	}

	.wanl-order .header .content {
		width: 100%;
		height: 180rpx;
		position: absolute;
		z-index: 10;
		left: 0;
		top: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 60rpx;
		box-sizing: border-box;
	}

	.wanl-order .header .status-text {
		font-size: 34rpx;
		line-height: 34rpx;
		color: #FEFEFE;
	}

	.wanl-order .header .reason {
		font-size: 24rpx;
		line-height: 24rpx;
		color: rgba(254, 254, 254, 0.75);
		padding-top: 15rpx;
		display: flex;
		align-items: center;
	}

	.wanl-order .header .reason-text {
		padding-right: 12rpx;
	}

	.wanl-order .header .status-img {
		width: 100rpx;
		height: 100rpx;
		display: block;
	}

	.wanl-order .lists .shopname {
		margin: 25rpx 25rpx 30rpx 25rpx;
	}

	.wanl-order .lists .price>view {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 50rpx;
	}

	.wanl-order .lists .cu-btn {
		font-size: 22rpx;
		padding: 0 14rpx;
	}

	/* .cu-list.menu-avatar>.cu-item {
		height: 160rpx;
	}

	.cu-list.menu-avatar>.cu-item .content {
		line-height: 1.4;
	} */

	.wanl-order .order .title {
		display: flex;
		align-items: center;
		justify-items: center;
		justify-content: space-between;
	}

	.wanl-order .order .item {
		display: flex;
		padding-top: 30rpx;
	}

	.wanl-order .order .foot {
		display: flex;
		justify-content: space-around;
		justify-items: center;
		align-items: center;
		padding-top: 25rpx;
		margin-top: 20rpx;
	}

	.wanl-order .order .foot text[class*="wlIcon-"] {
		color: #0081FF;
		margin-right: 10rpx;
		font-size: 32rpx;
	}

	// page{
	// 	background-color: #f6efe9;
	// }

	.wanl-order {
		.details-header {
			width: 100%;
			height: 260rpx;
			display: flex;
			justify-content: center;
			background-color: #fd8c00;
			position: relative;

			.content-wrap {
				width: 100%;
				height: 160rpx;
				position: absolute;
				top: 0;
				left: 0;
				padding: 60rpx 0;
				box-sizing: border-box;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
		}

		.main {
			width: 96%;
			margin: -100rpx auto;
			margin-bottom: 50rpx;
			color: #3d3d3d;

			.section {
				border-radius: 16rpx;
				background-color: #fff;
				margin-bottom: 20rpx;
				padding: 20rpx;
				font-size: 26rpx;
			}

			.section-1,
			.section-3 {
				padding: 40rpx 90rpx;
				display: flex;
				flex-direction: column;
				gap: 16rpx;
				position: relative;
			}

			.section-1 {
				.cu-avatar {
					width: 45rpx;
					position: absolute;
					top: 40rpx;
					left: 30rpx;
					background-size: 100%;
					background-position: top;
					background-repeat: no-repeat;
					//width: 40rpx;
				}
			}

			.section-3 {
				padding: 20rpx 20rpx 20rpx 90rpx;

				.cu-avatar {
					position: absolute;
					top: 40rpx;
					left: 30rpx;
					width: 45rpx;
				}
			}

			.section-2 {
				.cu-list.menu-avatar {
					.item {
						display: flex;
						align-items: center;
						justify-content: flex-start;
						margin-bottom: 20rpx;

						::after {
							display: none;
						}

						.cu-avatar {
							width: 120rpx;
							height: 120rpx;
							margin-right: 20rpx;
							flex-shrink: 0;
						}

						.content {
							flex: 1;

							.title {
								font-size: 26rpx;
								font-weight: bold;
							}

							.price {
								width: 100%;
								font-size: 30rpx;
								color: red;
								display: flex;
								justify-content: space-between;

								.num {
									font-size: 24rpx;
								}
							}
						}
					}

					.kefu {
						width: 90%;
						margin: 0 auto;
						padding-top: 20rpx;

						.btn-grow {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-bottom: 30rpx;

							.btn-contaniner {
								display: flex;
								align-items: center;

								.btn-icons {
									margin-right: 10rpx;
									width: 40rpx;
									height: 40rpx;
									display: inline-block;
									background-repeat: no-repeat;
								}
							}
						}

						.tip {
							background-color: #f6efe9;
							border-radius: 12rpx;
							padding: 14rpx 20rpx;
							font-size: 24rpx;
							text-align: center;
							position: relative;

							&::after {
								content: '';
								position: absolute;
								top: -35rpx;
								left: 50rpx;
								border: 20rpx solid transparent;
								border-left-width: 10rpx;
								border-right-width: 10rpx;
								border-bottom-color: #f6efe9;

							}
						}
					}
				}
			}
		}
	}

	.model-box {
		padding: 60rpx;
	}
</style>